<script setup>
import {reactive, ref} from "vue";

let message = ref("Hello, World!")

let colorActive = reactive({
  active: true,
})

let lineActive = reactive({
  line: true,
})
</script>

<template>
  <!-- 将对象语法转换对使用 变量 -->
  <h2 :class="colorActive">{{ message }}</h2>

  <h2 :class="lineActive">{{ message }}</h2>
</template>

<style scoped>
.active {
  color: red;
}

.line {
  text-decoration: underline
}
</style>